<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>datagrid的行录入效果 </title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" href="../js/easyui/themes/icon.css" />
    <script type="text/javascript">
       $(function () {
           $("#grid").datagrid({
               columns:[[
                   {
                       fieid:'id',
                       title:'编号',
                       width: 100,
                       editor:{
                           type:'validatebox',
                           options: {
                               required : true
                           }
                       }
                   },
                   {
                       field:'name',
                       title:'商品名称',
                       width: 200,
                       editor : {
                           type: 'validatebox',
                           options: {
                               required : true
                           }
                       }
                   },
                   {
                       field:'price',
                       title:'商品价格',
                       width: 200,
                       editor : {
                           type: 'validatebox',
                           options: {
                               required : true
                           }
                       }
                   }
               ]],
               toolbar:[
                   {
                       id:'add',
                       text:'添加',
                       iconCls:'icon-add',
                       handler : function(){
                           if(currentEditIndex != undefined){
                               // 正在编辑
                               return ;
                           }
                           // 插入一行新的数据，到首行
                           $("#grid").datagrid('insertRow', {
                               index : 0 ,
                               row : {} // 空对象
                           });

                           // 开启编辑状态
                           $("#grid").datagrid('beginEdit',0);

                           // 保存全局变量
                           currentEditIndex = 0 ;
                       }
                   },
                   {
                       id:'edit',
                       text:'编辑',
                       iconCls:'icon-edit',
                       handler : function(){
                           if(currentEditIndex != undefined){
                               // 正在编辑
                               return ;
                           }
                           // 获取到选中行
                           var row = $("#grid").datagrid('getSelected');
                           var index = $("#grid").datagrid('getRowIndex',row);
                           // 编辑第一行
                           $("#grid").datagrid('beginEdit',index);
                           // 保存到全局变量
                           currentEditIndex = index ;
                       }
                   },
                   {
                       id:'save',
                       text:'保存',
                       iconCls:'icon-save',
                       handler : function(){
                           // 保存编辑效果
                           $("#grid").datagrid('endEdit',currentEditIndex);
                       }
                   },
                   {
                       id:'cancel',
                       text:'取消',
                       iconCls:'icon-cancel',
                       handler : function(){
                           // 保存编辑效果
                           $("#grid").datagrid('cancelEdit',currentEditIndex);
                       }
                   }
               ],
               url : 'product.json',
               singleSelect : true ,
               onAfterEdit : function(rowIndex, rowData, changes){
                   // 当保存成功后 才会触发
                   currentEditIndex = undefined;
               },
               onCancelEdit : function(rowIndex, rowData){
                   currentEditIndex = undefined;
               }

           });
// 全局变量
           var currentEditIndex ;
           
       })
    </script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
